<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <style type="text/css">
        table
        {
        	text-align: center;
        }
        thead
        {
        	background-color:pink;color:blue;font-weight: bold;
        }
        .del
        {
        	text-decoration: none;color: red;
        }
    </style>
</head>
<body>

    <input type="button" value="清空" class="empty">
    <input type="button" value="添加" class="add">

    <table border="1" width="300">
    	<thead class="thead">
    		<tr>
    			<td>课程</td>
    			<td>教师</td>
    			<td>操作</td>   			
    		</tr>
    	</thead>
    	<tbody class="tbody">
    		<tr>
    			<td>PHP</td>
    			<td>小潘老师</td>
    			<td><a href="#" class="del">删除</a></td>   			
    		</tr>
    		<tr>
    			<td>THML5</td>
    			<td>小邓老师</td>
    			<td><a href="#" class="del">删除</a></td>   			
    		</tr>
    		<tr>
    			<td>CSS</td>
    			<td>小潘老师</td>
    			<td><a href="#" class="del">删除</a></td>   			
    		</tr>
    		<tr>
    			<td>JaveScript</td>
    			<td>小邓老师</td>
    			<td><a href="#" class="del">删除</a></td>   			
    		</tr>
    	</tbody>
    </table>
	
</body>
</html>
<script type="text/javascript">
	
	//给清空按钮注册点击事件，清空所有内容(tbody)
	$('.empty').on('click',function(){
        $('.tbody').empty();
	});

	//给添加注册点击事件,即添加一个tr
	$('.add').on('click',function(){
        $('<tr><td>新增课程JaveScript</td><td>blue老师</td><td><a href="#" class="del">删除</a></td></tr>').appendTo('.tbody');
	});

	//给删除按钮注册点击事件，删除一个tr
	//为了使动态创建的tr点击删除按钮也有事件，使用事件委托的方式注册
	$('.tbody').on('click','.del',function(){
		//从当前元素a开始找到父类td,再找td的父类tr
		//这里的$(this)指的就是类名为del的a标签
		$(this).parent().parent().remove();
	});
</script>